<template>
  <view>
    <!--pages/module/withdrawal/withdrawalRecord/withdrawalRecord.wxml-->
    <!-- <wxs module="numberUtil" src="../../utils/real.wxs"></wxs> -->
    <van-tabs :active="active" @change="onTabClick" sticky v-if="userInfo.org_type==1">
      <van-tab
        :title="item.title"
        :name="item.name"
        v-for="(item, index) in tabs"
        :key="index"
      ></van-tab>
    </van-tabs>
    <van-tabs :active="active" @change="onTabClick" sticky v-else>
      <van-tab
        :title="item.title"
        :name="item.name"
        v-for="(item, index) in tabs1"
        :key="index"
      ></van-tab>
    </van-tabs>
    <view class="container" v-if="recode_list[0]">
      <view class="pillContent">
        <view
          class="pillRecord"
          v-for="(item, index) in recode_list"
          :key="index"
        >
        <!-- src="/static/index/CPGW.png" -->
        <!-- :src="'/static/index/' + item.fin_type + '.png'" -->
          <image
            class="img"
             :src="'/static/index/record_list/' + item.fin_type + '.png'"
          ></image>
          <view class="rightbox">
            <text class="cate">{{ item.remark|substr }}</text>
            <text class="cate">{{ fin_type[item.fin_type]}}</text>
            <text class="date">{{numberUtil.dateof(item.create_time)}}</text>
          </view>
          <!-- <text class="num">{{item.in_out=='I'?'+':'-'+numberUtil.numberFixed(item.price)}}</text> -->
          <text :class="item.in_out == 'I' ? 'income' : 'num'">{{
            item.in_out == "I" ? "-"+ numberUtil.numberFixed(item.price) : "+" + numberUtil.numberFixed(item.price)
          }}</text>
          <view class="border"></view>
        </view>
      </view>

      <view class="remind" v-if="qh">正在加载。。。</view>
    </view>
    <!-- <view class="container" wx:if="{{recode_list[0]}}">
   <view class="collection">
	   <view>收款方式</view>
	   <view>时间</view>
	   <view>金额</view>
   </view>
.
  <view class="recode_list" wx:for="{{recode_list}}" wx:key="index" data-item="item">
   
	<view class="collect">{{item.in_out=='I'?'收':'支'}}</view>
	<view class="item">{{numberUtil.dateChange(item.create_time)}}</view>
	<view class="amount">￥{{numberUtil.numberFixed(item.price)}}</view>
		  
  </view>
 <view class="remind" wx-if="{{qh}}">正在加载。。。</view>
</view> -->
    <view class="nothing" v-if="!recode_list[0]">
      <image
        class="no_icon"
        src="https://img.xingkonglian.net/img/common/no_order.png"
      ></image>
      <view class="no_title">暂无记录</view>
    </view>
  </view>
</template>
<script module="numberUtil" lang="wxs" src="../../utils/real.wxs"></script>
<script>
let app =  getApp();

  
import { acc_recordlist } from "../../utils/imapi";
export default {
  props: {},
  components: {},
  data() {
    return {
      recode_list: [],
      img_list: "",
      page_index: 1,
      qh: false,
      active:0,
      tabs: [
        { id: 1, name: "", title: "全部" },
        { id: 2, name: "CZ", title: "充值" },
        { id: 3, name: "TX",  title: "提现" },
        { id: 4, name: "GW",  title: "购物" },
        { id: 5, name: "CPGW",  title: "砍价购物" },
        { id: 6, name: "FY",  title: "分佣" },
        { id: 7, name: "ZS",  title: "赠送" },
      ],
      tabs1: [
        { id: 1, name: "", title: "全部" },
        { id: 2, name: "CZ", title: "充值" },
        { id: 3, name: "TX",  title: "提现" },
        { id: 4, name: "GW",  title: "购物" },
        { id: 6, name: "FY",  title: "分佣" },
        { id: 7, name: "ZS",  title: "赠送" },
      ],
      tabIndex: 0,
      Cate: "", // 发起请求账单的分类
      Type: "", // 账单分类2
      sliderLeft: 200,
      fin_type:{
        'CPS':'交易单',
        'CZ':'充值',
        'TX':'提现',
        'ZS':'赠送',
        'BZJ':'保证金',
        'GW':'购物',
        'FY':'分佣',
        'CP':'砍价免费拿',
        'CPGW':'砍价购物',
        'MS':'商家金额结算',
        'SJTX':'商家提现',
        'SJ':'升级',
      },
      userInfo:app.globalData.userinfo||uni.getStorageSync('userinfo')
    };
  },
  computed: {},
  watch: {},
  onLoad() {
    this.load_accbill_record("");
    console.log(app.globalData.userinfo);
    console.log(uni.getStorageSync('userinfo'));
  },
  onReady() {},
  onShow() {},
  methods: {
    onTabClick(e) {
        console.log(e);
        this.page_index=1
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
        const fin_ype = e.detail.name==0?'':e.detail.name
      this.load_accbill_record(fin_ype);
    },
    async load_accbill_record(type) {
      let res = await acc_recordlist({
        page_index: this.page_index,
        page_size: 15,
        fin_type: type,
      });
      console.log(res.data);
      const cate = res.data;
      console.log(cate);
      cate.map((item) => {
        if (item.fin_type == "GW") {
          item.type = "购物";
        } else if (item.fin_type == "BZJ") {
          item.type = "保证金";
        } else if (item.fin_type == "BZJ") {
          item.type = "提现";
        } else {
          item.type = "测试";
        }
      });
      console.log(cate);
      this.recode_list = cate
      this.page_index=1
    },
  },
  async onReachBottom() {
    var that = this;
  this.qh = true
    if (this.qh) {
    this.page_index++
      let res = await acc_recordlist({
        page_index: this.page_index,
        page_size: 10,
        fin_type: this.Cate,
      });
      console.log(res);
      console.log(that.recode_list);
      const cate = res.data;
      console.log(cate);
      cate.map((item) => {
        if (item.fin_type == "GW") {
          item.type = "购物";
        } else if (item.fin_type == "BZJ") {
          item.type = "保证金";
        } else if (item.fin_type == "BZJ") {
          item.type = "提现";
        } else {
          item.type = "测试";
        }
      });
      that.recode_list.push(...cate);
      setTimeout(() => {
          this.qh=false
      }, 1000);
    }
  },
  onHide() {},
};
</script>

<style scoped lang="scss" >
/* pages/module/withdrawal/withdrawalRecord/withdrawalRecord.wxss */
.container {
  width: 750rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 20rpx;
  padding-top: 20rpx;
}
.top_title {
  margin: 0 20rpx;
  width: 650rpx;
  height: 64rpx;
  background: rgba(246, 245, 246, 1);
  border-radius: 10rpx;
  display: flex;
  align-items: center;
}
.recode_list {
  margin: 0 20rpx;
  width: 650rpx;
  height: 84rpx;
  border-bottom: solid 2rpx rgba(246, 245, 246, 1);
  display: flex;
  align-items: center;
}
.collect {
  width: 150rpx;
  margin-left: 35rpx;
}
.item {
  width: 360rpx;
  margin-left: 30rpx;
}
.amount {
  width: 100rpx;
  color: #f95a4b;
}
.payment {
  padding-left: 20rpx;
  width: 200rpx;
}
.time {
  width: 330rpx;
}
.price {
  text-align: right;
  width: 150rpx;
}
.remind {
  margin-top: 20rpx;
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(157, 156, 163, 1);
}
.collection {
  width: 650rpx;
  height: 88rpx;
  background-color: #f0eefd;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 10rpx;
  margin: 20rpx;
}
.collection > view:nth-child(2) {
  width: 270rpx;
}
.nav_box {
  height: 90rpx;
  display: flex;
  background-color: #fff;
  border-radius: 0px 0px 20rpx 20rpx;
}

.pillRecord {
  width: 750rpx;
  height: 162rpx;
  padding: 30rpx;
  box-sizing: border-box;
  /* background-color: pink; */
  display: flex;
}
.rightbox {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}
.pillRecord {
  position: relative;
}
.pillRecord image {
  width: 84rpx;
  height: 84rpx;
}
.pillRecord .cate {
  color: #111111;
  font-size: 32rpx;
}

.date {
  color: #999999;
  font-size: 26rpx;
  white-space: nowrap;
}
.num {
  font-size: 36rpx;
  color: #f95a4b;
  position: absolute;
  right: 30rpx;
  top: 30rpx;
}
.border {
  position: absolute;
  width: 616rpx;
  height: 4rpx;
  bottom: 0;
  left: 130rpx;
  background-color: #f5f5f5;
}
.income {
  color: #111111;
  font-size: 36rpx;
  position: absolute;
  right: 30rpx;
  top: 30rpx;
}
.nothing {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150rpx;
  flex-direction: column;
  color: #333333;
  font-size: 24rpx;
}

.no_icon {
  margin-bottom: 30rpx;
  width: 160rpx;
  height: 160rpx;
}

.no_title {
  color: #999999;
  font-family:PingFangSC-Medium,PingFang SC;
  font-size: 24rpx;
}
/deep/ .vantab {
  position: sticky;
  top: 200rpx;
}
</style>
